<template>
  <cube-scroll ref="scroll" class="detail" :options="scrollOptions">
    <div class="statushead" >
      <div  class="statuscircle" style="transform: scale(1); opacity: 1;">
        <img  class="circleimage" src="//fuss10.elemecdn.com/2/e4/bff50bab2840cdfbffeaf13a20710png.png" />
      </div>
      <h1  class="statustext"> {{order.orderStatus | orderStatusName}} </h1>
      <div  class="buttons">
        <button v-if="order.orderStatus == 0 && order.payStatus == 0" @click="pay(order.orderId)">去支付</button>
        <button v-if="order.orderStatus == 0" @click="cancelOrder(order.orderId)">{{cancelOrderName}}</button>
      </div>
    </div>
    <div  class="restaurant-card" >
        <div  class="head listitem">
          <div  class="name-wrap">
            <img  class="avatar" src="//fuss10.elemecdn.com/2/e4/bff50bab2840cdfbffeaf13a20710png.png" />
            <span  class="name">商品信息</span>
          </div>
        </div>
        <div  class="product-list listitem">
          <ul  class="cart-item" v-for="(orderDetail,index) in orderDetailList" :key="index">
            <li  class="product-item">
              <div  class="profile">
                <p  class="name">{{orderDetail.productName}}</p>
              </div>
              <div  class="price-wrap">
                <span  class="quantity">x{{orderDetail.productQuantity}}</span>
                <span >&yen;{{orderDetail.productPrice * orderDetail.productQuantity}}</span>
              </div>
            </li>
          </ul>
        </div>
        <div  class="finalprice listitem">
            实付 &yen;{{order.orderAmount}}
        </div>
    </div>
    <div class="detailcard" >
      <div class="detailcard-delivery card">
        <div  class="title listitem">
          配送信息
        </div>
        <ul  class="cardlist">
          <li  class="listitem"><span >送达时间：</span> 尽快送达 </li>
          <li  class="listitem"><span >送货地址：</span>
            <div  class="content">
              <p >{{order.buyerName}}|{{order.buyerPhone}}</p>
              <p >{{order.buyerAddress}}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="detailcard-order card">
        <div  class="title listitem">
          订单信息
        </div>
        <ul class="cardlist">
          <li class="listitem"><span >订单号：</span>{{order.orderId}} </li>
          <li class="listitem"><span >支付方式：</span>{{order.payType | payName}} </li>
          <li class="listitem"><span >下单时间：</span>{{order.createTime | time}} </li>
        </ul>
      </div>
    </div>
  </cube-scroll>
</template>

<script>
  import { getOrderDetail, getCookie } from 'api'
  import axios from 'axios'
  import Qs from 'qs'

export default {
  data() {
    return {
      order: {},
      orderDetailList: [],
      cancelOrderName: '取消订单'
    }
  },
  created() {
    getOrderDetail({
      orderId: this.$route.params.orderId,
      openid: getCookie('openid')
    }).then((order) => {
      this.order = order
      this.orderDetailList = this.order.orderDetailList
    })
  },
  filters: {
    payName: function (value) {
      if (value === 0) {
        return '货到付款'
      } else {
         return '微信支付'
      }
    },
    time: function (value) {
      var date = new Date(value * 1000)
      return date.getFullYear() +
        '-' +
        (date.getMonth() + 1) +
        '-' +
        date.getDate() +
        ' ' +
        date.getHours() +
        ':' +
        date.getMinutes()
      },
    /**
     * 待接单: orderStatus = 0
     * 订单已完结: orderStatus = 1
     * 订单已取消: orderStatus = 2
     * @param value
     */
    orderStatusName: function (value) {
      if (value === 0) {
        return '待接单'
      } else if (value === 1) {
      return '订单已完结'
      } else if (value === 2) {
        return '订单已取消'
      } else {
        return ''
      }
    }
  },
  methods: {
    cancelOrder: function (orderId) {
    this.cancelOrderName = '取消中...'

    var data = Qs.stringify({'orderId': orderId,
      'openid': getCookie('openid')})
    axios.post('http://liujinliang.wang/sell/buyer/order/cancel', data, {
      'headers': {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
    ).then((respones) => {
      respones = respones.data
      if (respones.errno === 0) {
        location.reload()
      } else {
        alert('取消订单失败:' + respones.msg)
      }
    })
    },
    pay: function (orderId) {
      location.href = 'http://liujinliang.wang/sell/pay/create' +
        '?openid=' + getCookie('openid') +
        '&orderId=' + orderId +
        '&returnUrl=' + encodeURIComponent('http://liujinliang.wang/' + '/#/order/' + orderId)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .detail
    position: absolute
    width: 100%
    height: 100%
    background-color: #f5f5f5
    .statuscircle
      margin-bottom: 10px
      text-align: center;
      img
        width: 80px
        height: 80px
        border-radius: 50%
    .statushead
      position: relative
      padding-top: 20px
      text-align: center
      background-color: #fff
      padding-bottom: 30px
      margin-bottom: 10px
      .statustext
        img
          width: 8px
        .buttons button
            height: 1.853333rem
            width: 4.8rem
            white-space: nowrap
            border-radius: .08rem
            font-size: 0.8rem
            color: #666
            margin: .4rem .133333rem 0
            border: 1px solid #ccc
            background-color: transparent
    .restaurant-card
      margin-bottom: 10px
      background-color: #fff
      img
        width: 7px
      .name-wrap
        img
          width: 20px
          height: 20px
    .detailcard
      .title
        color: #333
        font-weight: 700
    .detailcard-delivery
      margin-bottom: 10px
    .listitem
      padding: 15px 10px
      display: flex
      justify-content: space-between
      align-items: center
      border-bottom: 1px solid rgba(7,17,27,0.1)
      background-color: #fff
</style>
